<!-- <!DOCTYPE html> -->
<html lang="en">

<head>
  <meta charset="UTF-8">
  <!-- 使用UTF-8 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport"
    content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <!-- 设置移动终端可视区域 -->
  <meta content="telephone=no" name="format-detection">
  <!-- 禁止iPhone等手机自动将数字变成可点击的拨号连接 -->
  <title>966588服务</title>
  <link href="css/style.css" type="text/css" rel="stylesheet" />
  <link href="css/weui.css" type="text/css" rel="stylesheet" />
  <style>
    #endTime::-webkit-input-placeholder{
      color:#ccc;
    }
  </style>
</head>

<body style="background: #f6f6f6;">
  <div class="index" id="containerVue" v-cloak>
    <div v-show="showBanner==1" class="headerView">
      <i onclick="closeView()">&#139;</i>
      <h1>"966588"查询系统</h1>
      <div></div>
    </div>
    <div v-show="showBanner==0" style="background: #fff;" class="headerView">
      <i style="color:#0787d5" onclick="closeView()">&#139;<span style="color:#0787d5;font-size: 1rem;position: relative;bottom: 0.1rem;">返回</span></i>
    </div>
    <div class="choice_tip" v-if="choice">
      <div class="choice_view">
        <div class="choice">
          <div class="name">日期范围</div>
          <!-- <div class="text">
            <input type="text" style="width: 44%;" id="startTime" readonly />
            <span style="float: left;vertical-align: middle;margin: .2rem .5rem;">~</span>
            <input type="text" style="width: 45%;" id="endTime" readonly />
          </div> -->
        </div>
        <div class="choice_btn">
          <div class="btn_view" @click="choice = false">关闭</div>
          <div class="btn_view choice_btn_active" @click="search()">确定</div>
        </div>
      </div>
    </div>
    <div class="censusList">
      <div class="search-box">
        <select name="department" id="" class="select" v-model="param.deptCode" placeholder="" style="width: 60%;">
          <option value="">全部部门</option>
          <option :value="item.code" v-for="item in departmentList">{{item.name}}</option>
        </select>
        <input type="text" placeholder="选择月份" v-model="newDate" style="width: 25%;height: 2rem;margin:0 2rem 0 0;padding: 0 .5rem;border: 1px solid #ddd;border-radius: .25rem;color: #333;" id="endTime" readonly />
        <img src="./image/cq.png" alt="" class="icon" @click="censusCheck">
      </div>
      <div class="box">
        <div class="list" :class="item.checked?'':'listActive'" v-for="(item,index) in statisticsList">
          <div class="title" @click="changeList(item,index)">
            <div>{{item.deptName}}</div>
            <img src="./image/back.png" alt="" class="arrow">
          </div>
          <div class="content">
            <div class="ul">
              <div class="li">
                <div class="label">资料准备和外业生产</div>
                <div class="progress">
                  <div class="jindu" :style="{ width: (item.totalNum==0?0:(item.node0/item.totalNum) * 100).toFixed(0) + '%' }"></div>
                </div>
                <div class="val">{{item.node0}}/{{(item.totalNum==0?0:(item.node0/item.totalNum) * 100).toFixed(0)}}%</div>
              </div>
              <div class="li">
                <div class="label">内业生产</div>
                <div class="progress">
                  <div class="jindu" :style="{ width: (item.totalNum==0?0:(item.node1/item.totalNum) * 100).toFixed(0) + '%' }"></div>
                </div>
                <div class="val">{{item.node1}}/{{(item.totalNum==0?0:(item.node1/item.totalNum * 100)).toFixed(0)}}%</div>
              </div>
              <div class="li">
                <div class="label">成果质检</div>
                <div class="progress">
                  <div class="jindu" :style="{ width: (item.totalNum==0?0:(item.node2/item.totalNum) * 100).toFixed(0) + '%' }"></div>
                </div>
                <div class="val">{{item.node2}}/{{(item.totalNum==0?0:(item.node2/item.totalNum * 100)).toFixed(0)}}%</div>
              </div>
              <div class="li">
                <div class="label">领取报告</div>
                <div class="progress">
                  <div class="jindu" :style="{ width: (item.totalNum==0?0:(item.node3/item.totalNum) * 100).toFixed(0) + '%' }"></div>
                </div>
                <div class="val">{{item.node3}}/{{(item.totalNum==0?0:(item.node3/item.totalNum) * 100).toFixed(0)}}%</div>
              </div>
              <div class="li" @click="overdueCheck(item)">
                <div class="label" style="text-decoration: underline;color: #4d5dcc;">超期项目数</div>
                <div class="progress">
                  <div class="jindu" :style="{ width: (item.totalNum==0?0:(item.overDate/item.totalNum) * 100).toFixed(0) + '%' }"></div>
                </div>
                <div class="val">{{item.overDate}}/{{(item.totalNum==0?0:(item.overDate/item.totalNum) * 100).toFixed(0)}}%</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- loading 加载 -->
    <div style="opacity: 1;" v-if="loading">
      <div class="weui-mask_transparent"></div>
      <div class="weui-toast">
        <img src="image/load.gif" alt="" style="width: 2rem;margin: 2rem auto .5rem;">
        <p class="weui-toast__content">加载中</p>
      </div>
    </div>
  </div>
  <script src="script/jquery-3.5.js"></script>
  <script src="script/vue.js"></script>
  <script src="script/api.js"></script>
  <script src="script/ajax.js"></script>
  <script src="script/laydate/laydate.js"></script>
  <!-- <script src="script/iscroll.js"></script> -->
  <!-- <script src="../js/common/mui.min.js"></script> -->
  <!-- <script src="../js/common/openview.js"></script> -->
  <script>
    var app = new Vue({
      el: '#containerVue',
      data: {
        param: {
          deptCode: "",
          startDate: "",
          endDate: "",
        }, // 搜索条件
        choice: false, // 筛选条件
        loading: false,
        statisticsList: [],
        departmentList: [],
        newDate: new Date().getFullYear() + '-' + ((new Date().getMonth() + 1) < 10 ? '0' + (new Date().getMonth() + 1) : (new Date().getMonth() + 1)),
        showBanner:0,
      },
      mounted() {
        this.getDepartment();
        this.timeView();
        this.getTime(this.newDate);
      },
      watch: {
        'param.deptCode':function(val,oldval) {
          this.getStatistics();
        }
      },
      methods: {
        backView() {
          window.history.go(-1);
        },
        // 筛选功能
        search() {
          document.body.scrollTop = 0;
          this.choice = false;
          this.getStatistics();
        },
        timeView() {
          setTimeout(function () {
            laydate.render({
              elem: "#endTime", //指定元素
              type: 'month',
              format: 'yyyy-MM-dd',
              trigger: 'click',
              theme: '#0787d5',
              btns: ['now','confirm'],
              done: function (value, date, endDate) {
                app.getTime(value);
                app.newDate = value;
              },
            });
          }, 100);
        },
        // 日期筛选
        choiceView() {
          this.choice = true;
          this.param.startDate = "";
          this.param.endDate = "";
          setTimeout(function () {
            laydate.render({
              elem: "#startTime", //指定元素
              type: 'date',
              format: 'yyyy-MM-dd',
              trigger: 'click',
              showBottom: false,
              theme: '#0787d5',
              done: function (value, date, endDate) {
                app.param.startDate = value + " 00:00:00";
              }
            });
            laydate.render({
              elem: "#endTime", //指定元素
              type: 'date',
              format: 'yyyy-MM-dd',
              trigger: 'click',
              showBottom: false,
              theme: '#0787d5',
              done: function (value, date, endDate) {
                app.param.endDate = value + " 23:59:59";
              }
            });
          }, 5 * 100);
        },
        // 列表收缩
        changeList(item, i) {
          this.statisticsList.forEach((element, index) => {
            if (index == i) {
              element.checked = !element.checked
            }
          });
        },
        censusCheck() {
          window.location.href = './censusChart.html';
        },
        overdueCheck(item) {
          let valLength = item.deptName.indexOf("（")
          let deptName = item.deptName.substr(0, valLength)
          sessionStorage.setItem('deptName',deptName)
          window.location.href = './censusChartList.html?overdu=' + item.deptCode + '&startDate=' + this.param.startDate + '&endDate=' + this.param.endDate;
        },
        // 选择部门筛选
        chickDep(code) {
          console.log(code)
          this.param.deptCode = code;
          this.getStatistics()
        },
        // 获取时间
        getTime(time) {
					var that = this;
					ajaxHttp({
						url: 'jeecg-boot/node/nodeProjectInfo/getLastDayOfMonth',
						type: 'post',
						data: {yearMonth: time},
						success: function (res) {
							if (res.success) {
								// console.log(res);
                that.param.startDate = time + "-01";
                that.param.endDate = res.message;
                that.getStatistics();
							} else {
								$.Jwarning(res.message)
							}
						}
					});
				},
        // 获取部门列表
        getDepartment() {
          var that = this;
          ajaxHttp({
            url: 'jeecg-boot/sys/sysDepart/queryGhhsDeptList',
            type: 'post',
            data: {},
            beforeSend: function () {
              that.loading = true
            },
            success: function (res) {
              if (res.success) {
                that.departmentList = res.result
              } else {
                $.Jwarning(res.message)
              }
            },
            complete: function () {
              that.loading = false
            },
            error: function (err) {
              console.log(err);
            }
          });
        },
        // 获取统计信息
        getStatistics() {
          this.showBanner=localStorage.getItem("showBanner");
          var that = this;
          ajaxHttp({
            url: 'jeecg-boot/node/nodeProjectInfo/queryCountDetailByDept',
            type: 'post',
            data: this.param,
            beforeSend: function () {
              that.loading = true
            },
            success: function (res) {
              console.log(res);
              if (res.success) {
                res.result.reverse();
                res.result.forEach(item => {
                  item.checked = true;
                  if (item.node3 == undefined) {
                    item.node3 = 0;
                  }
                })
                that.statisticsList = res.result
              } else {
                $.Jwarning(res.message)
              }
            },
            complete: function () {
              that.loading = false
            },
            error: function (err) {
              console.log(err);
            }
          });
        },


      }
    })
  </script>
</body>

</html>